<template>
	<div class="wrapper">
		<div class="header">
			<Button style="width: 120px" type="warning" icon="ios-home" @click="$router.push({ path: '/control/index' })">主页</Button>
			<div class="logo">
				<LingGan width="1.5rem" height="1.5rem"></LingGan>
				<span>机械革命电竞控制台</span>
			</div>
			<Select style="width: 150px" v-model="path" @on-change="$router.push({ path })">
				<Option v-for="item in menuList" :key="item.id" :value="item.path">{{ item.title }}</Option>
			</Select>
		</div>
		<div class="title">
			<h4>{{ title }}</h4>
		</div>
	</div>
</template>

<script>
import LingGan from '@/components/svg/linggan.vue'

export default {
	components: {
		LingGan
	},

	props: {
		path: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: ''
		}
	},

	data() {
		return {
			menuList: [
				{ id: 11, icon: '', path: '/control/normal', title: '常规设置' },
				{ id: 22, icon: '', path: '/control/property', title: '性能' },
				{ id: 33, icon: '', path: '/control/lighting', title: '灯光设置' },
				{ id: 44, icon: '', path: '/control/battery', title: '电池' },
				{ id: 55, icon: '', path: '/control/screen', title: '显示设置' },
				{ id: 66, icon: '', path: '/control/device', title: '设备信息' }
			]
		}
	}
}
</script>

<style lang="less" scoped>
.wrapper {
	.header {
		display: flex;
		justify-content: space-between;
		.logo {
			span {
				margin-left: 1rem;
				font-family: PingFangSC-Regular;
				font-size: 1.33rem;
				color: var(--text-color);
				font-weight: 600;
			}
		}
	}
	.title {
		margin: 2rem 0;
		font-size: 1.33rem;
	}
}
</style>
